import React, { PureComponent } from "react";
import { Select, Cascader } from "antd";
import { cityjson } from "components/amap/util/cityArea";
import RightCarList from "./RightCarList";
import "./searchCarList.less";
const { Option } = Select;

class AreaSearchList extends PureComponent {
  constructor() {
    super();
    this.state = {
      selectDrawType: "rectangle",
      options: cityjson
    };
  }
  handleChange(e) {
    this.setState({ selectDrawType: e });
    if (e === "area") {
      this.props.closeDrawing();
    } else {
      this.props.drawing(e);
    }
  }
  carItemClick(index, item) {
    this.props.carItemClick(index, item);
  }
  drawing() {
    this.props.drawing(this.state.selectDrawType);
  }
  // 地区级联
  onAreaChange(value) {
    this.props.drawBounds(value[2]);
  }
  closeClear() {
    this.props.closeClear();
  }
  render() {
    return (
      <div className="search-car-list-area">
        <Select
          defaultValue={this.state.selectDrawType}
          style={{ width: 260 }}
          onChange={this.handleChange.bind(this)}
        >
          <Option value="rectangle">矩形</Option>
          <Option value="circle">圆形</Option>
          <Option value="area">行政区域</Option>
        </Select>
        {this.state.selectDrawType === "area" ? (
          <Cascader
            style={{ width: "260px", marginTop: "10px" }}
            options={this.state.options}
            onChange={this.onAreaChange.bind(this)}
            placeholder="请选择地区"
          />
        ) : (
          <p className="draw-p" onClick={this.drawing.bind(this)}>
            画图形
          </p>
        )}
        <div className="font-normal font-color-light list-res-row">
          <div>车辆数: 3</div>
          <div>
            在线数: <span className="font-color-zhu">2</span>
          </div>
          <div
            className="font-color-l-light"
            onClick={this.closeClear.bind(this)}
          >
            清除
          </div>
        </div>
        <div className="j-car-list-container">
          <RightCarList onItemClick={this.carItemClick.bind(this)} />
        </div>
      </div>
    );
  }
}

export default AreaSearchList;
